<template>
  <nav-bar />
  <!-- 顶部导航 -->
  <view class="nav-bar">
        <text class="nav-back" @click="onBack">&#8592;</text>
        <text class="nav-title">意见反馈</text>
      </view>
  <view class="feedback-page">
    <!-- Tab 切换 -->
    <view class="tab-bar">
      <view :class="['tab-item', activeTab === 0 ? 'active' : '']" @click="activeTab = 0">提交反馈</view>
      <view :class="['tab-item', activeTab === 1 ? 'active' : '']" @click="onTabMyFeedback">我的反馈</view>
    </view>

    <!-- 提交反馈 -->
    <view v-show="activeTab === 0">
      

      <!-- 表单区域 -->
      <view class="form-section">
        <view class="form-item required">
          <view class="label">反馈类型</view>
          <picker class="value-picker" :range="feedbackTypes" range-key="name" @change="onTypeChange">
            <view class="picker-value">{{ selectedType ? selectedType.name : '请选择' }}</view>
          </picker>
        </view>

        <view class="form-item required">
          <view class="label">反馈内容</view>
          <view class="value-row description-preview" @click="showContentPopup">
            <text class="description-text">{{ form.feedback_content || '请输入' }}</text>
            <text class="arrow">></text>
          </view>
        </view>

        <!-- 图片上传区域 -->
        <view class="upload-section">
          <view class="upload-title">上传图片（选填）</view>
          <view class="img-list">
            <view class="img-box" v-for="(img, index) in form.images" :key="index">
              <image class="preview-img" :src="img" mode="aspectFill" />
              <view class="img-delete" @click="onImgDelete(index)">×</view>
            </view>
            <view class="img-box add-img" @click="onAddImg" v-if="form.images.length < 9">
              <text class="add-icon">+</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 内容弹窗 -->
      <uni-popup ref="contentPopup" type="center">
        <view class="content-popup">
          <view class="popup-header">
            <text class="popup-title">反馈内容</text>
            <text class="popup-close" @click="closeContentPopup">×</text>
          </view>
          <view class="popup-content">
            <textarea 
              class="content-textarea" 
              v-model="form.feedback_content" 
              placeholder="请详细描述您遇到的问题或建议"
              :maxlength="500"
              show-confirm-bar="false"
            />
            <view class="word-count">{{ form.feedback_content.length }}/500</view>
          </view>
          <view class="popup-footer">
            <button class="confirm-btn" @click="closeContentPopup">确定</button>
          </view>
        </view>
      </uni-popup>

      <!-- 底部按钮 -->
      <view class="footer-bar">
        <button class="submit-btn" @click="onSubmit">提交反馈</button>
      </view>

      <!-- 自定义消息框组件 -->
      <message-box
        v-model="showMsgBox"
        :title="msgBoxTitle"
        :content="msgBoxContent"
        :showCancel="msgBoxShowCancel"
        :confirmText="msgBoxConfirmText"
        :cancelText="msgBoxCancelText"
        @confirm="onMsgBoxConfirm"
        @cancel="onMsgBoxCancel"
      />

      <!-- 自定义 Toast 组件 -->
      <toast
        v-model="showToast"
        :content="toastContent"
        :type="toastType"
        :duration="toastDuration"
      />
    </view>

    <!-- 我的反馈 -->
    <view v-show="activeTab === 1" class="my-feedback-list">
      <!-- 标题同步状态 -->
      <view class="my-feedback-title">
        我的反馈（{{ feedbackStatusOptions.find(opt => opt.value === filterStatus)?.label || '全部状态' }}）
      </view>
      <!-- 筛选栏 -->
      <view class="filter-bar">
        <picker :range="feedbackTypeOptions" :value="filterTypeIndex" @change="onFilterTypeChange">
          <view class="filter-picker" :class="{ active: filterType }">{{ filterType || '全部类型' }}</view>
        </picker>
        <picker :range="feedbackStatusOptions" range-key="label" :value="filterStatusIndex" @change="onFilterStatusChange">
          <view class="filter-picker" :class="{ active: filterStatus }">{{ feedbackStatusOptions.find(opt => opt.value === filterStatus.value)?.label || '全部状态' }}</view>
        </picker>
      </view>
      <view v-if="loadingFeedbackList" class="loading">加载中...</view>
      <view v-else-if="filteredFeedbackList.length === 0" class="empty">暂无反馈</view>
      <view v-else>
        <view v-for="item in filteredFeedbackList" :key="item.feedback_id" class="feedback-card" @click="openDetail(item)">
          <view class="card-header">
            <view class="type">{{ item.feedback_type }}</view>
            <view class="status" :class="item.feedback_reply ? 'done' : 'pending'">
              <text v-if="item.feedback_reply">已回复</text>
              <text v-else>未回复</text>
            </view>
          </view>
          <view class="content single-line">{{ item.feedback_content }}</view>
          <view class="time-row">
            <text class="icon-time">🕒</text>
            <text class="time">{{ item.create_time }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 反馈详情弹窗（新版） -->
    <uni-popup ref="detailPopup" type="center">
      <view class="detail-popup-new">
        <!-- 顶部信息区 -->
        <view class="popup-header-new">
          <view class="popup-title-new">反馈详情</view>
          <view class="popup-close-new" @click="closeDetailPopup">×</view>
        </view>
        <view class="popup-meta-row">
          <view class="meta-item">
            <text class="meta-label">类型：</text>
            <text class="meta-value">{{ detailItem.feedback_type }}</text>
          </view>
          <view class="meta-item">
            <text class="meta-label">状态：</text>
            <text class="meta-value status" :class="detailItem.feedback_reply ? 'done' : 'pending'">
              {{ detailItem.feedback_reply ? '已回复' : '未回复' }}
            </text>
          </view>
          <view class="meta-item">
            <text class="meta-label">时间：</text>
            <text class="meta-value">{{ detailItem.create_time }}</text>
          </view>
        </view>
        <!-- 反馈内容区 -->
        <view class="card-section feedback-card">
          <view class="section-title"><text class="icon-feedback">📝</text> 反馈内容</view>
          <view class="content-text">{{ detailItem.feedback_content }}</view>
          <view v-if="detailItem.images && detailItem.images.some(img => img.image_type === 1)" class="img-swiper-row">
            <scroll-view scroll-x class="img-swiper">
              <view class="img-swiper-list">
                <view v-for="(img, idx) in detailItem.images.filter(img => img.image_type === 1)" :key="img.id" class="img-swiper-box" @click.stop="openImgPreview(detailItem.images.filter(img => img.image_type === 1), idx)">
                  <image :src="getFullImageUrl(img.image)" class="feedback-img" mode="aspectFill" />
                </view>
              </view>
            </scroll-view>
          </view>
        </view>
        <!-- 回复内容区 -->
        <view v-if="detailItem.feedback_reply" class="card-section reply-card">
          <view class="section-title reply"><text class="icon-reply">💬</text> 回复内容</view>
          <view class="content-text">{{ detailItem.feedback_reply }}</view>
          <view v-if="detailItem.feedback_reply_time" class="reply-meta">回复时间：{{ detailItem.feedback_reply_time }}</view>
          <view v-if="detailItem.images && detailItem.images.some(img => img.image_type === 2)" class="img-swiper-row">
            <scroll-view scroll-x class="img-swiper">
              <view class="img-swiper-list">
                <view v-for="(img, idx) in detailItem.images.filter(img => img.image_type === 2)" :key="img.id" class="img-swiper-box" @click.stop="openImgPreview(detailItem.images.filter(img => img.image_type === 2), idx)">
                  <image :src="getFullImageUrl(img.image)" class="feedback-img" mode="aspectFill" />
                </view>
              </view>
            </scroll-view>
          </view>
        </view>
      </view>
    </uni-popup>

    <!-- 大图预览弹窗 -->
    <uni-popup ref="imgPreviewPopup" type="center">
      <view class="img-preview-popup">
        <image :src="imgPreviewList[imgPreviewIndex]" class="img-preview-big" mode="aspectFit" />
        <view class="img-preview-nav-bottom">
          <button class="img-preview-btn" @click="prevImg" :disabled="imgPreviewIndex === 0">‹</button>
          <span class="img-preview-count">{{ imgPreviewIndex + 1 }}/{{ imgPreviewList.length }}</span>
          <button class="img-preview-btn" @click="nextImg" :disabled="imgPreviewIndex === imgPreviewList.length - 1">›</button>
        </view>
        <view class="img-preview-close" @click="closeImgPreview">×</view>
      </view>
    </uni-popup>
  </view>
  </template>
  
  <script setup>
import { ref, onMounted, computed } from 'vue'
import { IntranetConfig, UserConfig } from '@/static/js/config'
import MessageBox from '@/components/message-box/message-box.vue'
import Toast from '@/components/toast/toast.vue'

// 获取用户信息
const userInfo = computed(() => UserConfig.getUserInfo())

// Toast 相关
const showToast = ref(false)
const toastContent = ref('')
const toastType = ref('')
const toastDuration = ref(2000)

function showCustomToast(content, type = '', duration = 2000) {
  toastContent.value = content
  toastType.value = type
  toastDuration.value = duration
  showToast.value = true
}

// 消息框相关
const showMsgBox = ref(false)
const msgBoxTitle = ref('')
const msgBoxContent = ref('')
const msgBoxShowCancel = ref(true)
const msgBoxConfirmText = ref('确定')
const msgBoxCancelText = ref('取消')
let msgBoxCallback = null

function openMsgBox({ title = '', content = '', showCancel = true, confirmText = '确定', cancelText = '取消', callback = null }) {
  msgBoxTitle.value = title
  msgBoxContent.value = content
  msgBoxShowCancel.value = showCancel
  msgBoxConfirmText.value = confirmText
  msgBoxCancelText.value = cancelText
  msgBoxCallback = callback
  showMsgBox.value = true
}

function onMsgBoxConfirm() {
  if (msgBoxCallback) msgBoxCallback(true)
}

function onMsgBoxCancel() {
  if (msgBoxCallback) msgBoxCallback(false)
}

// 表单数据，确保初始化时结构完整
const form = ref({
  feedback_type: '',
  feedback_content: '',
  images: []
})

// 反馈类型列表
const feedbackTypes = ref([])
const selectedType = ref(null)

// 内容弹窗
const contentPopup = ref(null)

// 筛选相关
const filterType = ref('') // 当前类型
const filterStatus = ref('') // 当前状态

const feedbackTypeOptions = computed(() => {
  const set = new Set(myFeedbackList.value.map(item => item.feedback_type));
  return ['全部类型', ...Array.from(set)];
});
const feedbackStatusOptions = [
  { value: '', label: '全部状态' },
  { value: '已处理', label: '已处理' },
  { value: '未处理', label: '未处理' }
];

const filterTypeIndex = computed(() =>
  filterType.value
    ? feedbackTypeOptions.value.findIndex(t => t === filterType.value)
    : 0
);
const filterStatusIndex = computed(() =>
  feedbackStatusOptions.findIndex(opt => opt.value === filterStatus.value)
);

function onFilterTypeChange(e) {
  const idx = e.detail.value;
  filterType.value = idx === 0 ? '' : feedbackTypeOptions.value[idx];
}
function onFilterStatusChange(e) {
  filterStatus.value = feedbackStatusOptions[e.detail.value].value;
}

const filteredFeedbackList = computed(() => {
  let list = myFeedbackList.value.slice();
  // 筛选类型
  if (filterType.value) {
    list = list.filter(item => item.feedback_type === filterType.value);
  }
  // 筛选状态
  if (filterStatus.value) {
    if (filterStatus.value === '已处理') {
      list = list.filter(item => item.feedback_reply);
    } else if (filterStatus.value === '未处理') {
      list = list.filter(item => !item.feedback_reply);
    }
  }
  // 按 create_time 降序
  list.sort((a, b) => new Date(b.create_time) - new Date(a.create_time));
  return list;
});

// 页面加载
onMounted(() => {
  // 检查权限
  if (!checkPermission()) return
  getFeedbackTypes()
})

// 获取反馈类型列表
async function getFeedbackTypes() {
  try {
    const res = await uni.request({
      url: IntranetConfig.domain + 'api/feedback/get_feedback_type_list/',
      method: 'GET',
      header: IntranetConfig.headers
    })
    if (res.data.code === 200 && Array.isArray(res.data.data)) {
      feedbackTypes.value = res.data.data.map(item => ({ id: item[0], name: item[1] }))
    } else {
      feedbackTypes.value = []
    }
  } catch (e) {
    feedbackTypes.value = []
  }
}

// 类型选择事件
function onTypeChange(e) {
  const index = e.detail.value
  selectedType.value = feedbackTypes.value[index]
  form.value.feedback_type = selectedType.value.id
}

// 图片相关
function onAddImg() {
  uni.chooseImage({
    count: 9 - form.value.images.length,
    success: (res) => {
      form.value.images = [...form.value.images, ...res.tempFilePaths]
    }
  })
}

function onImgDelete(index) {
  form.value.images.splice(index, 1)
}

// 内容弹窗
function showContentPopup() {
  contentPopup.value.open()
}

function closeContentPopup() {
  contentPopup.value.close()
}

// 返回上一页
function onBack() {
  uni.navigateBack()
}

// 检查权限
function checkPermission() {
  if (!userInfo.value) {
    showCustomToast('请先登录', 'error')
    setTimeout(() => {
      uni.reLaunch({
        url: '/pages/login/login'
      })
    }, 1500)
    return false
  }
  return true
}

// 提交反馈
async function onSubmit() {
  // 检查权限
  if (!checkPermission()) return

  // 表单验证
  if (!form.value.feedback_type) {
    showCustomToast('请选择反馈类型', 'error')
    return
  }
  if (!form.value.feedback_content) {
    showCustomToast('请输入反馈内容', 'error')
    return
  }

  uni.showLoading({
    title: '提交中...',
    mask: true
  })

  try {
    // 构建请求数据，字段名与后端一致
    const requestData = {
      feedback_type: form.value.feedback_type,
      feedback_content: form.value.feedback_content,
      feedback_user: userInfo.value.id
    }

    // 创建反馈
    const createRes = await uni.request({
      url: IntranetConfig.domain + 'api/feedback/create_feedback/',
      method: 'POST',
      header: IntranetConfig.headers,
      data: requestData
    })

    if (createRes.data.code === 200) {
      const feedbackId = createRes.data.data.feedback_id

      // 如果有图片，循环上传图片（每次单独上传）
      if (form.value.images.length > 0) {
        for (let i = 0; i < form.value.images.length; i++) {
          await new Promise((resolve, reject) => {
            const uploadTask = uni.uploadFile({
              url: IntranetConfig.domain + `api/feedback/upload_feedback_image/${feedbackId}/`,
              filePath: form.value.images[i],
              fileType: 'image',
              name: 'image',
              formData: {
                feedback: feedbackId,
                image_type: 1 // 反馈图片类型，见后端模型
              },
              success: (res) => {
                try {
                  const data = JSON.parse(res.data)
                  if (data.code === 200) {
                    resolve(data)
                  } else {
                    reject(new Error(data.msg))
                  }
                } catch (e) {
                  reject(new Error('解析响应数据失败'))
                }
              },
              fail: (err) => {
                reject(new Error(err.errMsg || '上传失败'))
              }
            })
            uploadTask.onProgressUpdate((res) => {
              console.log('上传进度：', res.progress)
            })
          })
        }
        showCustomToast('提交成功', 'success')
      } else {
        showCustomToast('提交成功', 'success')
      }

      setTimeout(() => {
        uni.navigateBack()
      }, 1500)
    } else {
      throw new Error(createRes.data.msg)
    }
  } catch (error) {
    console.error('提交反馈错误：', error)
    showCustomToast(error.message || '提交失败', 'error')
  } finally {
    uni.hideLoading()
  }
}

const activeTab = ref(0)
const myFeedbackList = ref([])
const loadingFeedbackList = ref(false)
const detailPopup = ref(null)
const detailItem = ref({})

function onTabMyFeedback() {
  activeTab.value = 1
  getMyFeedbackList()
}

function getFullImageUrl(path) {
  if (!path) return ''
  if (path.startsWith('http')) return path
  // 兼容 /media/ 路径
  return IntranetConfig.domain.replace(/\/$/, '') + path
}

async function getMyFeedbackList() {
  loadingFeedbackList.value = true
  myFeedbackList.value = []
  try {
    const res = await uni.request({
      url: IntranetConfig.domain + 'api/feedback/get_user_feedback_list/',
      method: 'GET',
      data: { user: userInfo.value.id },
      header: IntranetConfig.headers
    })
    if (res.data.code === 200 && Array.isArray(res.data.data)) {
      myFeedbackList.value = res.data.data
    } else {
      myFeedbackList.value = []
    }
  } catch (e) {
    myFeedbackList.value = []
  } finally {
    loadingFeedbackList.value = false
  }
}

function openDetail(item) {
  detailItem.value = item
  detailPopup.value.open()
}

function closeDetailPopup() {
  detailPopup.value.close()
}

// 大图预览相关
const imgPreviewPopup = ref(null)
const imgPreviewList = ref([])
const imgPreviewIndex = ref(0)
function openImgPreview(list, idx) {
  imgPreviewList.value = list.map(img => getFullImageUrl(img.image))
  imgPreviewIndex.value = idx
  imgPreviewPopup.value.open()
}
function closeImgPreview() {
  imgPreviewPopup.value.close()
}
function prevImg() {
  if (imgPreviewIndex.value > 0) imgPreviewIndex.value--
}
function nextImg() {
  if (imgPreviewIndex.value < imgPreviewList.value.length - 1) imgPreviewIndex.value++
}
  </script>
  
<style scoped lang="scss">
.feedback-page {
  background: #f8f9fa;
  min-height: 100vh;
  padding-bottom: 120rpx;
  font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
  overflow-x: hidden;
  max-width: 100vw;
  box-sizing: border-box;
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32rpx;
  height: 96rpx;
  background: #fff;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 0;
  z-index: 100;
  
  .nav-back { 
    color: #333; 
    font-size: 44rpx;
    width: 80rpx;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s;
    
    &:active {
      background: rgba(0, 0, 0, 0.05);
    }
  }
  
  .nav-title { 
    flex: 1; 
    text-align: center; 
    font-size: 36rpx;
    font-weight: 600;
    color: #333;
  }
}

.form-section {
  margin: 24rpx 32rpx;
  background: #fff;
  border-radius: 24rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
  overflow: hidden;
  box-sizing: border-box;
  max-width: 100vw;
  
  .form-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 32rpx;
    border-bottom: 1rpx solid #f5f5f5;
    font-size: 30rpx;
    transition: all 0.3s;
    
    &:active {
      background: #fafafa;
    }
    
    &:last-child {
      border-bottom: none;
    }
    
    .label {
      color: #333;
      width: 180rpx;
      text-align: left;
      flex-shrink: 0;
      font-weight: 500;
    }
    
    .value-input {
      flex: 1;
      min-width: 0;
      border: none;
      background: transparent;
      font-size: 30rpx;
      color: #333;
      text-align: right;
      padding: 0;
      
      &::placeholder {
        color: #999;
      }
    }
    
    .value-picker {
      flex: 1;
      text-align: right;
      
      .picker-value {
        color: #333;
        font-size: 30rpx;
        
        &:empty::before {
          content: '请选择';
          color: #999;
        }
      }
    }
    
    .value-row {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      min-width: 0;
    }
    
    .arrow {
      color: #999;
      font-size: 28rpx;
      margin-left: 8rpx;
    }
  }
  
  .form-item.required .label:after {
    content: '*';
    color: #ff7e2d;
    margin-left: 4rpx;
  }
}

.upload-section {
  padding: 32rpx;
  border-top: 1rpx solid #f5f5f5;
  
  .upload-title {
    font-size: 28rpx;
    color: #666;
    margin-bottom: 24rpx;
  }
  
  .img-list {
    display: flex;
    flex-wrap: wrap;
    gap: 24rpx;
  }
  
  .img-box {
    position: relative;
    width: 160rpx;
    height: 160rpx;
    border-radius: 16rpx;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    
    &:active {
      transform: scale(0.98);
    }
    
    .preview-img {
      width: 160rpx;
      height: 160rpx;
      border-radius: 16rpx;
      object-fit: cover;
    }
    
    .img-delete {
      position: absolute;
      top: -16rpx;
      right: -16rpx;
      width: 44rpx;
      height: 44rpx;
      background: #ff7e2d;
      color: #fff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32rpx;
      font-weight: bold;
      box-shadow: 0 4rpx 12rpx rgba(255, 126, 45, 0.3);
      z-index: 2;
      transition: all 0.3s;
      
      &:active {
        transform: scale(0.9);
        background: darken(#ff7e2d, 5%);
      }
    }
  }
  
  .add-img {
    border: 2rpx dashed #ff7e2d;
    background: #fff6ed;
    
    &:active {
      background: darken(#fff6ed, 2%);
    }
    
    .add-icon {
      font-size: 56rpx;
      color: #ff7e2d;
      font-weight: bold;
    }
  }
}

.description-preview {
  .description-text {
    flex: 1;
    color: #333;
    font-size: 30rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 400rpx;
    
    &:empty::before {
      content: '请输入';
      color: #999;
    }
  }
}

.content-popup {
  width: 90vw;
  max-width: 600rpx;
  background: #fff;
  border-radius: 24rpx;
  overflow: hidden;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
  
  .popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 32rpx;
    border-bottom: 1rpx solid #f5f5f5;
    background: #fff;
    
    .popup-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
    }
    
    .popup-close {
      font-size: 40rpx;
      color: #999;
      padding: 16rpx;
      margin: -16rpx;
      border-radius: 50%;
      transition: all 0.3s;
      
      &:active {
        background: #f5f5f5;
      }
    }
  }
  
  .popup-content {
    padding: 32rpx;
    background: #fff;
    
    .content-textarea {
      width: 100%;
      min-width: 0;
      max-width: 100%;
      height: 400rpx;
      font-size: 30rpx;
      line-height: 1.6;
      color: #333;
      padding: 24rpx;
      background: #f8f9fa;
      border-radius: 16rpx;
      border: 1rpx solid #eee;
      box-sizing: border-box;
      resize: none;
      
      &::placeholder {
        color: #999;
      }
    }
    
    .word-count {
      text-align: right;
      font-size: 24rpx;
      color: #999;
      margin-top: 16rpx;
    }
  }
  
  .popup-footer {
    padding: 24rpx 32rpx;
    border-top: 1rpx solid #f5f5f5;
    background: #fff;
    
    .confirm-btn {
      width: 100%;
      height: 88rpx;
      background: #ff7e2d;
      color: #fff;
      border: none;
      border-radius: 12rpx;
      font-size: 32rpx;
      font-weight: 500;
      transition: all 0.3s;
      
      &:active {
        transform: scale(0.98);
        background: darken(#ff7e2d, 5%);
      }
    }
  }
}

.footer-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  padding: 24rpx 32rpx calc(24rpx + env(safe-area-inset-bottom));
  box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.05);
  
  .submit-btn {
    width: 100%;
    height: 88rpx;
    background: #ff7e2d;
    color: #fff;
    border: none;
    border-radius: 12rpx;
    font-size: 32rpx;
    font-weight: 500;
    transition: all 0.3s;
    
    &:active {
      transform: scale(0.98);
      background: darken(#ff7e2d, 5%);
    }
  }
}

.tab-bar {
  display: flex;
  background: #fff;
  border-bottom: 1rpx solid #f5f5f5;
  margin-bottom: 16rpx;
  .tab-item {
    flex: 1;
    text-align: center;
    padding: 28rpx 0;
    font-size: 32rpx;
    color: #999;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.2s, border-bottom 0.2s;
    border-bottom: 4rpx solid transparent;
    &.active {
      color: #ff7e2d;
      border-bottom: 4rpx solid #ff7e2d;
      background: #fff6ed;
    }
  }
}

.my-feedback-list {
  padding: 24rpx 32rpx;
  .loading, .empty {
    text-align: center;
    color: #999;
    font-size: 28rpx;
    margin-top: 80rpx;
  }
  .feedback-card {
    background: #fff;
    border-radius: 20rpx;
    box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
    margin-bottom: 32rpx;
    padding: 32rpx;
    cursor: pointer;
    transition: box-shadow 0.2s;
    &:active {
      box-shadow: 0 4rpx 16rpx rgba(255,126,45,0.12);
    }
    .card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10rpx;
      .type {
        color: #ff7e2d;
        font-size: 30rpx;
        font-weight: 600;
      }
      .status {
        font-size: 26rpx;
        font-weight: 600;
        padding: 4rpx 18rpx;
        border-radius: 20rpx;
        &.pending {
          background: #fff6ed;
          color: #faad14;
          border: 1rpx solid #faad14;
        }
        &.done {
          background: #e6ffed;
          color: #52c41a;
          border: 1rpx solid #52c41a;
        }
      }
    }
    .content {
      color: #333;
      font-size: 30rpx;
      margin-bottom: 8rpx;
      &.single-line {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 100%;
        display: block;
      }
    }
    .time-row {
      display: flex;
      align-items: center;
      color: #bbb;
      font-size: 24rpx;
      .icon-time {
        margin-right: 6rpx;
      }
    }
  }
}

.detail-popup-new {
  width: 92vw;
  max-width: 700rpx;
  background: #fff;
  border-radius: 28rpx;
  box-shadow: 0 12rpx 48rpx rgba(0,0,0,0.18);
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1200;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding-bottom: 12rpx;
  padding-top: 12rpx;
  .popup-header-new {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 28rpx 32rpx 0 32rpx;
    .popup-title-new {
      font-size: 36rpx;
      font-weight: 700;
      color: #ff7e2d;
      letter-spacing: 2rpx;
    }
    .popup-close-new {
      font-size: 44rpx;
      color: #bbb;
      padding: 16rpx;
      margin: -16rpx;
      border-radius: 50%;
      transition: all 0.3s;
      &:active { background: #f5f5f5; }
      cursor: pointer;
    }
  }
  .popup-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 18rpx;
    padding: 18rpx 32rpx 0 32rpx;
    .meta-item {
      font-size: 26rpx;
      color: #666;
      .meta-label { font-weight: 500; }
      .meta-value.status {
        font-weight: 600;
        &.pending { color: #faad14; }
        &.done { color: #52c41a; }
      }
    }
  }
  .card-section {
    margin: 24rpx 32rpx 0 32rpx;
    border-radius: 18rpx;
    padding: 24rpx 20rpx 18rpx 20rpx;
    box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.06);
    .section-title {
      font-size: 28rpx;
      font-weight: 600;
      margin-bottom: 12rpx;
      display: flex;
      align-items: center;
      &.reply { color: #52c41a; }
      .icon-feedback { margin-right: 8rpx; }
      .icon-reply { margin-right: 8rpx; }
    }
    .content-text {
      color: #333;
      font-size: 28rpx;
      margin-bottom: 10rpx;
      word-break: break-all;
      line-height: 1.7;
    }
    .img-swiper-row {
      margin-top: 8rpx;
      .img-swiper {
        width: 100%;
        white-space: nowrap;
        overflow-x: auto;
      }
      .img-swiper-list {
        display: flex;
        gap: 16rpx;
      }
      .img-swiper-box {
        width: 120rpx;
        height: 120rpx;
        border-radius: 16rpx;
        overflow: hidden;
        box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.10);
        cursor: pointer;
        flex-shrink: 0;
        position: relative;
      }
      .feedback-img {
        width: 120rpx;
        height: 120rpx;
        object-fit: cover;
        border-radius: 16rpx;
        transition: transform 0.2s, box-shadow 0.2s;
      }
      .img-swiper-box:hover .feedback-img {
        transform: scale(1.08);
        box-shadow: 0 8rpx 24rpx rgba(255,126,45,0.18);
        z-index: 2;
      }
    }
    .reply-meta {
      color: #bbb;
      font-size: 24rpx;
      margin-top: 6rpx;
    }
  }
  .feedback-card {
    background: #fff6ed;
  }
  .reply-card {
    background: #e6ffed;
    margin-bottom: 24rpx;
  }
}

.img-preview-popup {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1300;
  background: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}

.img-preview-big {
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  object-fit: contain;
  background: #000;
  border-radius: 0;
  box-shadow: none;
  display: block;
  margin: 0 auto;
}

.img-preview-nav-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 48rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28rpx;
  z-index: 10;
}

.img-preview-btn {
  background: #fff6ed;
  color: #ff7e2d;
  border: none;
  border-radius: 50%;
  width: 60rpx;
  height: 60rpx;
  font-size: 38rpx;
  font-weight: bold;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.10);
  transition: background 0.2s;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.img-preview-btn:disabled {
  background: #f0f0f0;
  color: #bbb;
}

.img-preview-count {
  color: #fff;
  font-size: 28rpx;
  background: rgba(0,0,0,0.35);
  padding: 6rpx 18rpx;
  border-radius: 16rpx;
  z-index: 11;
}

.img-preview-close {
  position: absolute;
  top: 32rpx;
  right: 40rpx;
  color: #fff;
  font-size: 60rpx;
  font-weight: bold;
  cursor: pointer;
  z-index: 20;
  transition: color 0.2s;
  background: rgba(0,0,0,0.2);
  border-radius: 50%;
  padding: 8rpx 18rpx 12rpx 18rpx;
}

.img-preview-close:hover {
  color: #ff7e2d;
}

.filter-bar {
  display: flex;
  gap: 24rpx;
  margin-bottom: 24rpx;
  align-items: center;
  padding: 0 0 12rpx 0;
  .filter-picker {
    background: #f5f5f5;
    border-radius: 24rpx;
    padding: 0 32rpx;
    height: 64rpx;
    display: flex;
    align-items: center;
    font-size: 28rpx;
    color: #333;
    min-width: 120rpx;
  }
}

.filter-picker.active {
  color: #ff7e2d;
  font-weight: bold;
  border: 2rpx solid #ff7e2d;
  background: #fff6ed;
}

.my-feedback-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 12rpx;
  padding-left: 8rpx;
}
  </style>    
